<template>
  <div class="doff-analysis">
    <BasicCard style="margin-bottom: 20px">
      <!-- <BasicTitle title="落纱统计"></BasicTitle> -->
      <BasicVxeTable ref="gridRef" v-bind="gridOption"> </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-bottom: 20px">
      <!-- <BasicTitle title="落纱记录"></BasicTitle> -->
      <BasicVxeTable ref="gridRefRecord" v-bind="gridOptionRecord"> </BasicVxeTable>
    </BasicCard>

    <BasicCard class="report-table compliance-rate" style="margin-bottom: 20px">
      <BasicTitle title="达标率"></BasicTitle>
      <div class="filter">
        时间选择：
        <el-date-picker
          size="default"
          v-model="monthValue"
          value-format="YYMM"
          type="month"
          placeholder="请选择"
          @change="getLineChartData"
        />
      </div>
      <div class="chart-box">
        <div id="lineChart" style="height: 400px"></div>
      </div>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import { DoffStatisticsRowVO, DoffRecordRowVO } from '../../types'
  import { DoffStatisticsTableColumns, DoffRecordTableColumns } from '../../data'

  import { postHuoQuLouShaJiLu, getHuoQuDaBiaoLv } from '@/api/shengChanJianShi'
  import dayjs from 'dayjs'
  import * as echarts from 'echarts'
  import { COLOR_ARR_BJ } from '@/utils/constants/common'

  const { t } = useI18n()
  // 落纱统计
  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.落纱统计'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `doff-analysis-statistics`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '数据表'
    },
    loading: true,
    maxHeight: 500,
    data: [],
    columns: DoffStatisticsTableColumns
  })
  // 落纱记录
  const gridOptionRecord = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.落纱记录'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `doff-analysis-record`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    loading: true,
    maxHeight: 500,
    data: [],
    columns: DoffRecordTableColumns
  })

  const getDoffStatisticsList = () => {
    return new Promise<DoffStatisticsRowVO[]>(() => {
      postHuoQuLouShaJiLu({
        craftNodeName: '细纱',
        tsIdStart: '25070701',
        tsIdEnd: '25070701',
        machineDocumentIds: [
          '4de9c979-844d-ca98-5893-3a07f84df979',
          '5d4f3928-c1b8-4645-1636-3a07f8523dca',
          '8a961eb5-5893-ff1b-5611-3a07f8588a24',
          'ee7de5ec-780b-a6fe-8623-3a07f880f2bf',
          '746e62c5-9e87-6fcc-7ce8-3a07f88d5c1b',
          'a652f245-f572-f083-d962-3a07f88e7b06',
          '7f6ab903-a46d-3b52-4963-3a07f8988822',
          'e7af5469-8e0b-479a-5c8b-3a07f8a48024',
          'be9b5161-65cf-ef4e-2b88-3a07f8a7b7d3',
          '28b45c95-13d4-51e5-7588-3a07f8ad5dbc',
          'cbc0db09-688d-8e08-abea-3a07f8ad5f57',
          '6aae403c-f835-c392-1c9b-3a07f8ad6028',
          'e9347381-3200-d9be-36b6-3a07f8ad60de',
          '748d2d09-4331-327e-2257-3a07f8ad61f5',
          '5b810006-f207-8285-3698-3a07f8ad62cc',
          '34f9619f-e538-2177-b6b4-3a07f8b2209c',
          'd38bb447-eaeb-12b0-d9f6-3a07f8b641d4',
          'ea7d985c-132f-9183-a110-3a07f8b7a729',
          '2480aed9-1cf9-b5ff-56ce-3a07f8b7a81e',
          'b94856d3-e013-1943-df3f-3a07f8b8814c',
          'd0bbf6b1-bb86-2652-8b47-3a07f8b881a7',
          'fffab949-7f29-1cf1-ca2d-3a07f8b88204',
          '199f4c09-a55a-1ba1-3d9b-3a07f8b88724',
          '8811ef05-a41d-7d0c-2168-3a07f8b887a8',
          'a44ec50b-732a-0772-f5e0-3a07f8b88834',
          'eec6bcec-6bc1-3f37-e0a8-3a07f8b888e4',
          '327a01f0-28ef-c040-1590-3a07f8b889bb',
          'a894873d-5619-4d0e-6ecd-3a07f8b88a37',
          '173ef5db-c1bf-797e-8fbe-3a07f8b88aef',
          '2d1484b7-9516-e2e2-a1c2-3a07f8b88bc8',
          '20e33350-4ae2-cbf7-0b39-3a07f8b88c57',
          'bc502734-cc96-ad0f-0b71-3a07f8b88cf5',
          '8d6b4602-6362-5e96-dfa8-3a07f8b88daf',
          '218b5296-6c0f-2afe-6d27-3a07f8b88ec8',
          '36115ad7-9a7c-82a9-1be3-3a07f8b88f35',
          '2e31a6ee-1259-7407-b6b7-3a07f8b88f90',
          'bee9363b-cb19-d3d6-5165-3a07f8b88fd5',
          '79e7e534-0fa1-89ee-aa53-3a07f8b890b1',
          '71e5c600-1a16-96be-4f55-3a07f8b89140',
          'da365532-554a-7a64-b347-3a07f8b891d0',
          '30dc205a-ce26-05cb-9eca-3a07f8b8929e',
          '70a2ad9b-6b13-d516-7303-3a07f8b89316',
          '04a896e4-a4df-cd50-219a-3a07f8b89837',
          'c1dea7f5-7bb9-2f6d-8f29-3a07f8b89961',
          'a4201098-81d9-50dd-5ca7-3a07f8b899e4',
          'e0651109-e8df-62b1-430a-3a07f8b89ab9',
          'e8d3c198-1deb-e042-1fcb-3a07f8b89b26',
          '0dc8d95b-5bac-c249-98d1-3a07f8b89bc7',
          'bd930dd6-74f9-1706-2700-3a07f8b89c6f',
          'f1189926-f9ca-c5bd-2d09-3a07f8b89d07',
          'e3101923-d44e-8b25-7b6d-3a07f8b89d70',
          '077ebc91-8021-5c1b-35a3-3a07f8b8a022',
          '8bdfff33-ec51-171d-0a88-3a07f8b8a0b9',
          '69c084e5-eed2-4622-86f9-3a07f8b882a2',
          '894ca604-9f16-dd76-d07c-3a07f8b88388',
          'bfc6b9f8-8a11-109b-33dc-3a07f8b88405',
          '2a127ad4-a809-94a9-bbcc-3a07f8b884b0',
          '62fc777c-186a-ac84-c441-3a07f8b88561',
          '8760b482-2cf9-48cf-eb73-3a07f8b88623',
          '370c05bd-5942-fd4b-55f9-3a07f8b886d5',
          '59e9e59d-bbc5-e555-302e-3a07f8b89364',
          '8f61247d-0050-9a18-88a3-3a07f8b893c2',
          'bc43e985-7497-7b06-4963-3a07f8b89462',
          '754ee70b-c6c8-84e5-9b50-3a07f8b894d6',
          '5f43e49e-28ef-bc1e-7ffb-3a07f8b89585',
          '06d588fa-95fb-659c-d323-3a07f8b895fe',
          '9b471bfa-2439-9661-e1b6-3a07f8b89682',
          '45e49894-fddb-cdef-d035-3a07f8b896ce',
          'f7c8f304-e713-9fe2-3949-3a07f8b89dc2',
          '0d0b9ba1-5dac-683a-f8c4-3a07f8b89e3c',
          '0b8af324-c786-3e30-6c10-3a07f8b89eb5',
          'ed8aaf6c-9308-6361-798e-3a07f8b89f24'
        ]
      }).then((res: any) => {
        gridOption.loading = false
        gridOptionRecord.loading = false
        gridOption.data = res.doffingAnalysisStatistics.map((value) => {
          value.doffingTimesAvg = (value.doffingTimesAvg / 60).toFixed(2)
          value.doffingTimesTotal = (value.doffingTimesTotal / 60).toFixed(2)
          value.doffingLengthTotal =
            value.doffingLengthTotal == null
              ? null
              : Math.round(value.doffingLengthTotal * 100) / 100
          value.doffingLengthAvg =
            value.doffingLengthAvg == null ? null : Math.round(value.doffingLengthAvg * 100) / 100
          return value
        })

        gridOptionRecord.data = res.doffingAnalysisDetail
          .sort((a, b) => {
            return a.doffingStart - b.doffingStart ? 1 : -1
          })
          .map((value) => {
            return {
              doffIntactRate: value.doffIntactRate,
              difference: value.difference,
              doffingLength: value.doffingLength,
              doffingStart: dayjs(value.doffingStart).format('YYYY-MM-DD HH:mm'),
              doffingTimes: (value.doffingTimes / 60).toFixed(2),
              fixedLength: value.fixedLength,
              machineDocumentId: value.machineDocumentId,
              machineName: value.machineName,
              personName: value.personName,
              tsId: value.tsId
            }
          })
      })
    })
  }

  // 达标率图表相关
  const myChart = ref()
  const monthValue = ref(dayjs(new Date()).format('YYMM'))
  const xData = ref<any>([])
  const chartData = ref<any>([])
  const getLineChartData = () => {
    xData.value = []
    chartData.value = []
    getHuoQuDaBiaoLv({
      yearMonth: monthValue.value
    }).then((res: any) => {
      res.forEach((value) => {
        let riQi = value.tsIdYearMonthDay.toString().slice(2)
        xData.value.push(insertStr(riQi, 2, '-'))
        chartData.value.push(value.reachStandard)
      })
      handleSetVisitChart()
    })
  }

  const insertStr = (source, start, newStr) => {
    return source.slice(0, start) + newStr + source.slice(start)
  }

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('lineChart'))
    let option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        left: '0%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xData.value,
          axisTick: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          max: 100,
          axisLabel: {
            formatter: function (val) {
              return val + '%'
            }
          },
          // 分割线
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#bbb9b9'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: '达标率',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top',
            color: COLOR_ARR_BJ[0].titleColor,
            formatter: function (val) {
              return val.value + '%'
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: COLOR_ARR_BJ[0].bjColor
                  },
                  {
                    offset: 0.8,
                    color: '#b6dffa'
                  }
                ],
                false
              ),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: COLOR_ARR_BJ[0].titleColor
            }
          },
          emphasis: {
            focus: 'series'
          },
          data: chartData.value
        }
      ]
    }
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      setTimeout(function () {
        myChart.value.resize()
      }, 100)
    })
  }

  onMounted(() => {
    getDoffStatisticsList()
    getLineChartData()
  })
</script>
<style scoped lang="scss">
  .compliance-rate {
    position: relative;
    .filter {
      position: absolute;
      top: 14px;
      right: 20px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.9);
    }
  }
</style>
